<template>
  <div class="page-visitor">
    <!-- 访客分析主页面 -->

    <!-- 头部时间选框 -->
    <div class="header">
      <DateTypeSelect
        :date-options="dateOptions"
        :date-type="dateType"
        @date-change="onDateChange"
      />
    </div>

    <!-- 访问深度 -->
    <AccessDepth :depth-data="depthData" />

    <!-- 访问地域分布 -->
    <AccessArea
      :date-type="timeType"
      :date-range="dateRange"
      :region-data="regionData"
      :table-data="tableData"
    />

    <!-- 系统设备 -->
    <systemDevice
      :sys-data="sysData"
      :equi-data="equiData"
    />

    <!-- 推广统计 -->
    <promotion />
  </div>
</template>

<script setup>
import moment from 'moment'
import DateTypeSelect from '../components/date-type-select.vue'
import AccessDepth from './components/access-depth.vue'
import AccessArea from './components/access-area.vue'
import systemDevice from './components/system-device.vue'
import promotion from './components/promotion.vue'

// 1.近7天 2.近30天 3.自定义
const dateOptions = [
  {
    label: $t('dataAnalysis.nearly7'),
    value: 5
  },
  {
    label: $t('dataAnalysis.nearly30'),
    value: 6
  },
  {
    label: $t('dataAnalysis.custom'),
    value: 7
  }
]

const dateType = ref(5)
const dateRange = ref([])
const timeType = ref(1)
const onDateChange = (data) => {
  switch (data.timeType) {
    case 5:
      timeType.value = 1
      dateRange.value = []
      break
    case 6:
      timeType.value = 2
      dateRange.value = []
      break
    case 7:
      timeType.value = 3
      dateRange.value = [moment(data.dateRange[0]).unix() * 1000, moment(data.dateRange[1]).unix() * 1000]
      break
  }
  updateDateTime()
}

// 获取分类数据
const depthData = reactive({ // 访问深度数据
  xData: [],
  seriesData: [],
  seriesData2: []
})
const regionData = reactive({ // 访问地域分布数据
  xData: [],
  seriesData: []
})
const equiData = reactive({ // 系统设备数据
  xData: [],
  seriesData: []
})
const sysData = ref([0, 0, 0, 0, 0])
const tableData = ref([])
const onGetVisitorData = () => {
  // 获取产品数据
  http({
    url: http.adornUrl('/platform/flowUserAnalysis/getUserAnalysisData'),
    method: 'get',
    params: http.adornParams({
      type: timeType.value,
      start: dateRange.value[0] || null,
      end: dateRange.value[1] || null
    })
  }).then(({ data }) => {
    if (data) {
      const visitPageList = data.visitPageList
      // 获取访问地域分布数据
      const visitUserList = data.visitUserList
      // 获取访问深度数据
      let visit = ''
      visitPageList.forEach(item => {
        // 1:1 2:2 3:3 4:4 5:5 6:6-10 7:11-20 8:20+
        if (item.visitId <= 5) {
          visit = item.visitId
        } else if (item.visitId === 6) {
          visit = '6-10'
        } else if (item.visitId === 7) {
          visit = '11-20'
        } else if (item.visitId === 8) {
          visit = '20+'
        }
        depthData.xData.push(visit + $t('dataAnalysis.page'))
        depthData.seriesData.push(item.userNums)

        // 成功了，实现将数据放到数组对象里面了
        depthData.seriesData2.push({ value: item.userNums, name: visit + $t('dataAnalysis.page') })
      })
      if (visitPageList.length === 0) {
        for (let i = 1; i < 9; i++) {
          if (i <= 5) {
            visit = i + ''
          } else if (i === 6) {
            visit = '6-10'
          } else if (i === 7) {
            visit = '11-20'
          } else if (i === 8) {
            visit = '20+'
          }
          visit = visit + $t('dataAnalysis.page')
          depthData.xData.push(visit)
          depthData.seriesData.push(0)
          depthData.seriesData2.push({ value: 0, name: visit })
        }
      }
      // 访问地域与表格数据
      let i = 1
      visitUserList.forEach(item => {
        if (item.provinceName === '澳门特别行政区') {
          item.provinceName = '澳门'
        }
        regionData.xData.push(item.provinceName)
        regionData.seriesData.push({ value: item.visitNums, name: item.provinceName })
        let stopTime = item.stopTime + $t('dataAnalysis.second')
        if (item.stopTime > 60) {
          stopTime = parseInt(item.stopTime / 60) + $t('dataAnalysis.minute') + item.stopTime % 60 + $t('dataAnalysis.second')
        }
        tableData.value.push({ amount1: i++, amount2: item.provinceName, amount3: item.visitNums, amount4: item.visitUser, amount5: item.prodVisitNums, amount6: stopTime })
      })
      if (visitUserList.length === 0) {
        regionData.xData.push($t('dataAnalysis.null'))
        regionData.seriesData.push({ value: 0, name: $t('dataAnalysis.null') })
        tableData.value.push({ amount1: 0, amount2: $t('dataAnalysis.null'), amount3: 0, amount4: 0, amount5: 0, amount6: 0 })
      }

      // 系统设备数据
      equiData.xData.push('android', $t('sysManagement.miniProgramSmall'), 'h5', 'ios', 'pc')
      equiData.seriesData.push({ value: data.android, name: 'android' }, { value: data.applets, name: $t('sysManagement.miniProgramSmall') }, { value: data.h5, name: 'h5' }, { value: data.ios, name: 'ios' }, { value: data.pc, name: 'pc' })
      sysData.value = [data.android, data.applets, data.h5, data.ios, data.pc]
    }
  })
}
const updateDateTime = () => {
  // 访问深度数据重置
  depthData.xData = []
  depthData.seriesData = []
  depthData.seriesData2 = []
  // 访问地域数据重置
  tableData.value = []
  regionData.xData = []
  regionData.seriesData = []
  // 系统设备数据重置
  equiData.xData = []
  equiData.seriesData = []
  onGetVisitorData()
}

</script>

<style lang="scss" scoped>
.page-visitor{
  .header {
    width: 100%;
    background: #f7f8fa;
    padding: 15px 20px;
  }
}

</style>
